<template>
  <div class="flex items-center">
    <div :style="{ marginRight: marginRight + 'px' }">
      <dk-uni-icon v-if="iconType === 'icon'" :type="icon" :size="iconSize" :color="iconColor"></dk-uni-icon>
      <img v-else-if="iconType === 'img' && image" :src="image" :style="{ width: iconSize + 'px', height: iconSize + 'px' }" alt="" />
    </div>
    <div :style="{ color: titleColor, fontSize: titleSize + 'px', fontWeight: titleBold ? 'bold' : '' }">{{ title }}</div>
  </div>
</template>

<script>
export default {
  name: 'DkAppTitle',
  props: {
    iconType: { type: String, default: 'icon' },
    image: { type: String, default: '' },
    icon: { type: String, default: 'fire-filled' },
    iconSize: { type: Number, default: 16 },
    marginRight: { type: Number, default: 4 },
    iconColor: { type: String, default: '#F64C2E' },
    title: { type: String, default: '这是标题' },
    titleColor: { type: String, default: '#000' },
    titleSize: { type: Number, default: 16 },
    titleBold: { type: Boolean, default: false }
  }
}
</script>

<style scoped></style>
